<template>
  <v-row class="user-bio-panel">
    <!-- user profile -->
    <v-col cols="12">
      <v-card class="pt-10 pb-3">
        <v-card-title class="flex justify-center flex-column">
          <v-avatar
            class="v-avatar-light-bg mb-4 self-center"
            size="120"
            rounded
          >
            <v-img :src="profile" />
          </v-avatar>
          <span class="font-medium text-[20px] text-[#736B7D] self-center">
            {{ resolveRole(userData.role) }}
          </span>
        </v-card-title>

        <v-card-text
          class="d-flex justify-center xs:!grid xs:!grid-rows-2 xs:!grid-cols-1 xs:!justify-start flex-wrap mt-2 pe-sm-0"
        >
          <div class="d-flex align-center me-8 mb-4 xs:!me-0 xs:ml-20">
            <v-avatar size="40" rounded color="#F2EBFF" class="me-3">
              <v-icon color="#9155fd" size="22">mdi-check</v-icon>
            </v-avatar>

            <div>
              <h3 class="text-xl font-medium mb-n1 text-[rgba(94,86,105,.87)]">
                {{ userData.vote }}
              </h3>
              <span class="text-[rgba(94,86,105,.68)]">
                {{ t('message.dashboard.vote.title') }}
              </span>
            </div>
          </div>

          <div class="d-flex align-center mb-4 me-4 xs:!me-0 xs:ml-20">
            <v-avatar size="40" rounded color="#F2EBFF" class="me-3">
              <v-icon color="#9155fd" size="22">
                mdi-briefcase-variant-outline
              </v-icon>
            </v-avatar>

            <div>
              <h3 class="text-xl font-medium mb-n1 text-[rgba(94,86,105,.87)]">
                {{ userData.totalProposal }}
              </h3>
              <span class="text-[rgba(94,86,105,.68)]">
                {{ t('message.dashboard.proposal.title') }}
              </span>
            </div>
          </div>
        </v-card-text>

        <v-card-text class="px-5">
          <h2 class="text-xl font-weight-semibold mb-2 text-black">
            {{ t('message.ido.list.detail') }}
          </h2>

          <v-divider />

          <v-list bg-color="white">
            <v-list-item dense class="px-0 mb-n2">
              <span class="font-medium me-2 text-[rgba(94,86,105,.87)]">
                {{ t('message.profile.panel.wallet') }}
              </span>
              <span class="text-[#8a8d93] break-all">{{ walletAddress }}</span>
            </v-list-item>

            <v-list-item dense class="px-0 mb-n2">
              <span
                class="font-medium text-no-wrap me-2 text-[rgba(94,86,105,.87)]"
              >
                {{ t('message.profile.panel.link') }}
              </span>
              <span class="text-[#8a8d93]">
                {{
                  userData.shareUrl === null || userData.shareUrl === ''
                    ? t('message.profile.panel.notSet')
                    : config.shortUrlPrefix + userData.shareUrl
                }}
              </span>
            </v-list-item>

            <v-list-item dense class="px-0 mb-n2">
              <span
                class="font-medium text-no-wrap me-2 text-[rgba(94,86,105,.87)]"
              >
                {{ t('message.profile.panel.email') }}
              </span>
              <span class="text-[#8a8d93]">
                {{
                  userData.email === null || userData.email === ''
                    ? t('message.profile.panel.notSet')
                    : userData.email
                }}
              </span>
            </v-list-item>

            <v-list-item dense class="px-0 mb-n2">
              <span class="font-medium me-2 text-[rgba(94,86,105,.87)]">
                {{ t('message.profile.panel.sex') }}
              </span>
              <span class="text-[#8a8d93] text-capitalize">
                {{
                  userData.sex
                    ? resolveSex(userData.sex)
                    : t('message.profile.panel.notSet')
                }}
              </span>
            </v-list-item>
            <v-list-item dense class="px-0 mb-n2">
              <span class="font-medium me-2 text-[rgba(94,86,105,.87)]">
                {{ t('message.profile.panel.tel') }}
              </span>
              <span class="text-[#8a8d93]">
                {{
                  userData.mobile === null || userData.mobile === ''
                    ? t('message.profile.panel.notSet')
                    : userData.mobile
                }}
              </span>
            </v-list-item>

            <v-list-item dense class="px-0 mb-n2">
              <span class="font-medium me-2 text-[rgba(94,86,105,.87)]">
                {{ t('message.profile.panel.language') }}
              </span>
              <span class="text-[#8a8d93]">
                {{
                  userData.language === null
                    ? t('message.profile.panel.notSet')
                    : resolveLanguageName(userData.language)
                }}
              </span>
            </v-list-item>

            <v-list-item dense class="px-0 mb-n2">
              <span class="font-medium me-2 text-[rgba(94,86,105,.87)]">
                {{ t('message.profile.panel.country') }}
              </span>
              <span class="text-[#8a8d93]">
                {{
                  userData.countryName === null ||
                  userData.countryName === undefined
                    ? t('message.profile.panel.notSet')
                    : resolveCountryName(userData.countryName)
                }}
              </span>
            </v-list-item>
          </v-list>
        </v-card-text>

        <v-card-actions class="justify-center">
          <v-btn
            color="white"
            class="bg-[#9155fd]"
            :disabled="walletAddress === undefined"
            @click="toEditProfile"
          >
            {{ t('message.profile.panel.edit') }}
          </v-btn>
        </v-card-actions>
      </v-card>

      <!-- edit profile dialog data -->
      <user-bio-edit
        v-model:is-bio-dialog-open="isBioDialogOpen"
        :user-data="userData"
      />
    </v-col>
  </v-row>
</template>

<script setup lang="ts">
// import {avatarText, kFormatter} from '@/utils/filter'
import { ref, toRefs } from 'vue';
import type { UserInfo } from '@/types/user';
// import formatAddress from '@/utils/formatters'
import profile from '@/assets/images/profile.png';
import { resolveLanguage, resolveLanguageName, resolveRole } from '@/utils';

import UserBioEdit from './UserBioEdit.vue';

import WalletStore from '@/store/WalletStore';
import { storeToRefs } from 'pinia';
import { countryCodeApi } from '@/api/system/user';
import { useI18n } from 'vue-i18n';
import config from '@/config';

const walletStore = WalletStore();
const { walletAddress } = storeToRefs(walletStore);
const { t } = useI18n();

interface UserInfoProps {
  userData: UserInfo;
}

const props = withDefaults(defineProps<UserInfoProps>(), {});

const { userData } = toRefs(props);

const isBioDialogOpen = ref(false);
const countryOptions: any = [];

const resolveSex = (sex: number): string => {
  if (sex === 0) {
    return t('message.profile.panel.notSet');
  } else if (sex === 1) {
    return 'man';
  } else {
    return 'woman';
  }
};

const resolveCountry = (country: string | undefined) => {
  console.log('country:', country);
  if (country === undefined) {
    return undefined;
  }
  return countryOptions.find(
    (item: any) =>
      item.country === country ||
      item.title === country ||
      item.title.indexOf(country) != -1
  )?.country;
};

const resolveCountryName = (country: string | undefined) => {
  console.log('country:', country);
  const result = countryOptions.find((item: any) => item.country === country);
  if (result) {
    return result.title;
  } else {
    return country;
  }
};

const toEditProfile = () => {
  isBioDialogOpen.value = !isBioDialogOpen.value;
  userData.value.language = resolveLanguage(userData.value.language);
  userData.value.countryName = resolveCountry(userData.value.countryName);
};

countryCodeApi().then((res: any) => {
  console.log('countryCodeApi res:', res);
  res.forEach((item: any) => {
    countryOptions.push({
      title: item.countryName,
      country: item.countryCode,
    });
  });
  console.log(countryOptions);
});
</script>

<style scoped lang="scss">
.v-card--variant-elevated {
  box-shadow: 0 2px 10px 0 rgb(94 86 105 / 10%) !important;
}

.v-card {
  border-radius: 6px;
  background: white;
  overflow: visible;
}
</style>
